<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="css/element-ui.css">
  <style>
  body,html{margin:0;padding:0;}
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  
  .el-aside {
    color: #333;
  }
</style>
</head>
<body>
	<div id="apptable">
  <template>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </template> 
</div>
</body>
  <!-- import Vue before Element -->
  <script src="js/vue.js"></script>
  <script src="js/vue-router.js"></script>
  <!-- import JavaScript -->
  <script src="js/element-ui.js"></script>
  <script src="js/jquery-3.2.1.min.js"></script>
  <script>
    new Vue({
      el: '#apptable',
      data: function() {
        return { 
        	tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }] }
      }
    })
  </script>
</html>